<template>
    <div>
        <div id="lyrbox">
            <!-- <textarea name="" id="songtext" cols="70" rows="38">{{text}}</textarea> -->
            <div id="textbox">
            <ul></ul>
            </div>
        </div> 
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:"songtext",
    data(){
        return{
            arr:'',
            text:'',
            asongid:'',
            time:[],
            lry:[],
        }
    },
    computed: {
    data () {
    return this.$store.state.time;
  }
},
   created:function(){
        this.load();
    },
    watch:{
        data(m,n){
            let that=this;
          let ul = document.querySelector('ul');
           that.time.forEach(function(a, i) {
                if (a == n) {
                 ul.style.top =  160- i * 50 + 'px';
                    for (let j = 0; j < ul.children.length; j++) {
                        ul.children[j].style.color= 'white';
                    }
                    ul.children[i].style.color= '#700511';
                    console.log(ul.children[i]);
                }
            })
        }
    },
    methods:{
        load: function() {
                    let that = this;
                    that.asongid=that.$route.query.keyword;
                       axios.get("http://39.101.203.189:3000/lyric?id=" + that.asongid).then(function(response) {
                        console.log(response.data)
                        that.text=response.data.lrc.lyric;
                        let lrc = []
                        let timer = []
                         let arr=that.text.split('\n');
                      let reg = /\[(\d{2}:\d{2})\.\d{2,3}\](.+)/;
                    arr.forEach(function(a) {
                        if (reg.exec(a) != null) {
                        timer.push(reg.exec(a)[1])
                        lrc.push(reg.exec(a)[2])
                        }
                            })
                      let ul = document.querySelector('ul');
                        let frg = document.createDocumentFragment()
                            lrc.forEach(function(a) {
                            let li = document.createElement('li')
                            li.innerText = a;
                        frg.appendChild(li);
                                })
                         ul.appendChild(frg)
                    that.lry=lrc;
                    that.time=timer;
                    // console.log(that.lry);
                    
                    }, function(err) {})
                },
                
    },
    components:{
    },

}
</script>

<style scoped> 
ul{
    position: absolute;
    top:60px;
    transition: top .4s linear;
}
li ,ul{
    list-style: none;
     height: 20px;
     line-height: 50px;
     text-align: center;
     font-size: 20px;
}

#lyrbox{
    position: relative;
    top:20px;
    left: 400px;
    width: 600px;
    height: 560px;
    display: inline-block;
    /* background-color: #fff; */
}
#songtext{
    background: none;
    border: none;
    color: aliceblue;
    font-weight: 400;
}
#textbox{
    position: relative;
    top:0px;
    height: 560px;
    width: 500px;
    color: aliceblue;
    display: inline-block;
    overflow-y: scroll;
    overflow-x: hidden;

}
    /*  */

 
 #songimg {
     position: relative;
     top: 10px;
     left: 50px;
     max-width: 180px;
     max-height: 300px;
     color: aliceblue;
 }
 
 .songtext {
     position: relative;
     width: 300px;
     top: 30px;
     left: 50px;
     color: #fff;
     font-size: 18px;
     opacity: 0.9;
     font-weight: 300;
 }
 
 .songbutton {
     position: relative;
     width: 110px;
     height: 40px;
     top: -470px;
     left: 50px;
     background-color: #2c2324;
     color: #fff;
     font-size: 16px;
     outline: none;
     border-radius: 5px;
     border: none;
     font-weight: 600;
 }
 
 .playingico {
     font-family: "iconfont" !important;
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 500;
     cursor: default;
 }
 
 .otherico {
     position: relative;
     top: -390px;
     left: -60px;
     margin-right: 25px;
     font-family: "iconfont" !important;
     font-size: 24px;
     color: aliceblue;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 500;
     cursor: default;
 }
 
 #brief {
     position: relative;
     top: 50px;
     left: 50px;
     width: 320px;
     height: 120px;
     color: #fff;
     opacity: 0.9;
 }
 #hotsear{
     top:30px;
 }
 ::-webkit-scrollbar {
  width: 8px; 
 
}
::-webkit-scrollbar-thumb {
  background-color:#2c2324;
  border-radius: 5px;
  height:30px;
}


</style>